<template>
  <div>
    <div class="test" ref="test1">
      <div
        class="test1"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          padding: 0 10px;
        "
      >
        <div class="flex">
          <IconifyIconOffline
            :icon="infoFilled"
            width="24px"
            height="24px"
            class="text-[#ffffff] mr-[7px]"
          />
          <div class="text-[#ffffff]">人员入侵告警</div>
        </div>
        <IconifyIconOffline
          :icon="closeLine"
          width="30px"
          height="30px"
          class="text-[#ffffff]"
          @click="fn"
        />
      </div>

      <div
        style="display: flex; height: 250px; padding: 10px; background: #fff"
      >
        <div>
          <el-image
            style="width: 200px; height: 150px; margin-right: 10px"
            src="/img/xFC9FFD43CBBD.jpg"
            fit="fill"
            draggable="false"
          />
        </div>
        <div>
          <div style="margin-bottom: 5px">时间：2024-01-12 09:57:30</div>
          <div style="margin-bottom: 5px">设备：xFC9FFD43CBBD</div>
          <div style="margin-bottom: 5px">位置：港湾创业大厦13楼电梯口</div>
        </div>
      </div>
      <div />
    </div>
  </div>
</template>
<script lang="ts" setup>
import infoFilled from "@iconify-icons/ep/info-filled";
import closeLine from "@iconify-icons/ri/close-line";
import { ref } from "vue";
const test1 = ref<any>();
const flag = ref<boolean>(true);
const fn = () => {
  // test1.value.style.display = "none";
  flag.value = false;
};
// import { alarmWebsocket } from "@/store/modules/alarmWebSocket";
// const audio = new Audio();
// const store = alarmWebsocket();
// const play = audio => {
//   audio.src = "/audio/5c88e51168d3728345.mp3";
//   audio.play();
// };
</script>
<style>
.test {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100000;
  width: 480px;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(to right, #f56c6c, #fecaca, #f56c6c);
  background-size: 200%;
  border: 1px solid #f56c6c;
  border-radius: 3px;
  animation: color-change 6s infinite;
}

@keyframes color-change {
  0% {
    background-position: 100%;
  }

  25% {
    background-position: 150%;
  }

  50% {
    background-position: 200%;
  }

  75% {
    background-position: 150%;
  }

  100% {
    background-position: 100%;
  }
}
</style>
